<template>
	<view class="page">
		<drag-button
		:isDock="true"
		:existTabBar="false"
		@btnRefresh = "search"
		@btnClick="goTop" />
		<view class="search-block">
			<uni-search-bar 
			:maxlength = "100"
			bgColor="#f7f7f7"
			:v-model = "key"
			placeholder="请输入搜索关键字" 
			cancelText="取消"
			:radius="100" 
			:refresher-enabled = "true"
			@refresherrefresh="search"
			@input="input"
			@confirm="search">
			<uni-icons slot="searchIcon" color="#9 99999" size="18" type="home" />
			</uni-search-bar>
		</view>
		<scroll-view 
		scroll-y
		:lower-threshold="30"
		@scrolltolower = "loadMore"
		:scroll-into-view="scrollTop"
		enable-back-to-top
		:style="{'height': screenHeight-statusBarHeight-120 + 'px'}">
			<!-- <uni-list-item id="top" style="height: 40px;"></uni-list-item> -->
			<uni-list-item 
			v-for="(list,index) in resultList"
			:key = "index"
			:id="index == 0 ? 'top' : ''"
			:clickable = "true"
			@click="toDetails(list,index)"
			:title="list.fileName" 
			:note="'描述：'+(list.fileDescription == '' ? '无' : list.fileDescription)" 
			showArrow 
			thumb-size="lg" 
			rightText="查看详情" />
			<view class="empty-block" v-if="isSearchNull">
				<text class="empty-text">啥也没找到哇｡°(°¯᷄◠¯᷅°)°｡</text>
				<image src="../../static/wunai.gif" class="empty-img" mode=""></image>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import browser from '../../js_sdk/ww-browser/libs/browser.js'
	var _self
	
	export default {
		data() {
			return {
				screenHeight: uni.getSystemInfoSync().screenHeight,
				screenWidth: uni.getSystemInfoSync().screenWidth,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				key: "",
				page: 1,
				size: 15,
				resultList: [],
				isSearchNull: false,
				scrollTop: "",
			}
		},
		onLoad(data) {
			_self = this
			this.search()
		},
		onShow() {
			// this.search()
		},
		onPullDownRefresh() {
			this.search()
		},
		onNavigationBarButtonTap(e) {
			if(e.text == "下载记录"){
				uni.navigateTo({
					url:"../history/history",
					// url:"../test/test",
					animationDuration:400,
					animationType:"slide-in-right"
				})
			}else if(e.text == "文件上传"){
				uni.navigateTo({
					url:"../upload/upload",
					animationDuration:400,
					animationType:"slide-in-left"
				})
				
				//使用
				// var options = {
				//     'data': '' // 自定义参数
				// }
				// browser.init(options)
				// browser.show("http://fileweb.xiaohong.work")
			}
		},
		methods: {
			toDetails(item,index){
				this.$store.commit("setFileDetails",item)
				this.$nextTick(function(){
					uni.navigateTo({
						url:"../details/details?index="+index,
						animationDuration:400,
						animationType:"slide-in-right"
					})
				})
			},
			loadMore(){
				_self.isEnd = false
				if(_self.isSearchNull){
					return
				}
				this.page ++
				uni.showLoading({
					mask:false,
					title:"加载中..."
				})
				uni.request({
					url: _self.utils.basicUrl+"/file/search/"+_self.page+"/"+_self.size,
					method: "GET",
					data: {
						"key": _self.$store.state.key
					},
					success: function(res) {
						if(res.data.code === 20000){
							if(res.data.data.records.length == 0){
								uni.showToast({
									icon:"none",
									title:"没有了哦( ๑ˊ•̥▵•)੭₎₎"
								})
							}else{
								_self.resultList.push(...res.data.data.records) 
							}
						}else{
							_self.utils.requestFail(res)
						}
						uni.hideLoading()
					},
					fail: () => {
						uni.showToast({
							icon:"none",
							title: '网络错误'
						})
						uni.hideLoading()
					},
					complete() {
						
					}
				})
			},
			search(){
				this.isSearchNull = false
				uni.showLoading({
					mask:false,
					title:"搜索中..."
				})
				_self.page = 1
				uni.request({
					url: _self.utils.basicUrl+"/file/search/"+_self.page+"/"+_self.size,
					method: "GET",
					data: {
						"key":_self.$store.state.key
					},
					success: function(res) {
						if(res.data.code === 20000){
							_self.resultList = res.data.data.records
							if(_self.resultList.length == 0){
								_self.isSearchNull = true
							}else{
								_self.$nextTick(function(){
									_self.goTop()
								})
							}
						}else{
							_self.utils.requestFail(res)
						}
						uni.hideLoading()
					},
					fail: () => {
						uni.showToast({
							icon:"none",
							title: '网络错误'
						})
						uni.hideLoading()
					},
					complete() {
						uni.stopPullDownRefresh()
					}
				})
			},
			input(e){
				this.key = e.value
				this.$store.commit("setKey",e.value)
			},
			goTop() {
				// 解决view层不同步的问题
				this.scrollTop = ""
				this.$nextTick(function() {
					this.scrollTop = "top"
				});
			}
		}
	}
</script>

<style>
	@import url("index.css");
</style>
